<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Throughout 
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20100423

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Magic Table - Barchart example</title>
<meta name="keywords" content="Google visualisation API, html, html 5, javascript, table, visualisation, visualization, information visualisation, information visualization, InfoVis, data visualisation, data visualization, web vis, web visualisation, web visualization, distortion, fish-eye, fish-eye lens, fisheye, fisheye lens, chart, barchart, scatterplot, graph, graphics, canvas, canvas element" />
<meta name="description" content="The Magic Table is a JavaScript library that allows you to see more in your data by applying some simple visual techniques to transform a table." />
<script type="text/javascript" src='http://magic-table.googlecode.com/svn/trunk/magic-table/javascript/magic_table.js'></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
@import "slidertron.css";
</style>
<LINK REL="SHORTCUT ICON" HREF="http://www.grvisualisation.50webs.com/favicon.ico">
</head>
<body onload='drawTable();'>
<!-- Google Analytics -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5253719-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- end #header-wrapper -->
<div id="logo">
	<h1>Magic Table </h1>
	<em> by Dr Greg Ross</em>
</div>
<div id="header">
	<div id="menu">
		<ul>
			<li><a href="http://www.grvisualisation.50webs.com/" class="first">Home</a></li>
			<li><a href="examples.html">Examples</a></li>
			<li><a href="infovis.html">InfoVis</a></li>
			<li><a href="excelrangefinder.html">Excel RangeFinder</a></li>
			<li><a href="javascript_voronoi.html">Voronoi</a></li>
			<li><a href="javascript_surface_plot.html">3D Surface Plot</a></li>
			<li><a href="visi_scroll.html">visi-scroll</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	<div id="search">
		<form method="get" action="http://www.google.com/search">
			<fieldset>
				<input type="text" name="q" id="search-text" size="15" />
				<input style="display:none;" type="checkbox"  name="sitesearch" value="grvisualisation.50webs.com" checked />
			</fieldset>
		</form>
	</div>
	<!-- end #search -->
</div>
<!-- end #header -->
<hr />
<!-- end #logo -->
<div id="page">
	<div id="page-bgtop">
		<div id="content">
			
			<!-- adsense container -->
			<div>
				<div class="post" style="float: left; width:40%;">
					<h2 class="title">Example 3</h2>
					<div class="entry">
						<p>The example shown below uses dummy data. You can copy the page source
						and customise it for your own site.  </p>
					</div>
				</div>
				
				<div style="float: right;">
					<!--adsense code-->
					<script type="text/javascript"><!--
					google_ad_client = "pub-5899093360211244";
					/* 336x280, created 5/19/10 */
					google_ad_slot = "8698410079";
					google_ad_width = 336;
					google_ad_height = 280;
					//-->
					</script>
					<script type="text/javascript"
					src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>
					<!--end-->
				</div>
				
				<div style="clear: both;"></div>
			</div>
			<br><br>
			<!-- end adsense container -->
			
			<div class="post">
				<h2 class="title">Table of barcharts </h2>
				<div class="entry">
						This example demonstrates how we can obain a sideways barchart view of data with the table. This is achieved simply by filling each table 
						cell by an amount proportional to the value it contains. With large sets of data this technique can effectively depict correlations 
						between columns, especially when the fisheye is enabled.  
						
						<br>
						<br>
						The barchart effect is obtained by calling the table's "setBarFill" method. It can also be controlled by the "Bar fill" checkbox on the user interface.
						<br>
						<br>
						<div id='tableTargetDiv'></div>
				</div>
				
			</div>
		</div>
		<!-- end #content -->
		<div id="sidebar">
			<ul>
				<li>
					<h2>Real world use cases</h2>
					<div><a href="http://qiime.sourceforge.net/tutorials/tutorial.html" >rRNA sequencing</a></div>
					<br><br>
					<div><a href="http://collabornet.org/visualization/magic_table/e1.html">Student Degree Progress</a></div>
					<br><br>
					<div><a href="http://homepages.ecs.vuw.ac.nz/~craig/livej/everything.html">LiveJ - software visualisation</a></div>
				</li>
				<li>
					<h2>Features </h2>
					<ul>
						<li class="feature">fisheye table view</li>
						<li class="feature">bar-fill table cells</li>
						<li class="feature">customisable colour ramp</li>
						<li class="feature">colour and fill by global or by column values</li>
					</ul>
				</li>
				<li>
					<h2>License </h2>
					<ul>
						<li><a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License v3</a></li>
					</ul>
				</li>
				<li>
					<h2>Downloads and source</h2>
					<div><a href="http://code.google.com/p/magic-table/downloads/detail?name=magic-table-v2.0.0.3.zip" class="links">Download</a></div>
					<div><a href="http://code.google.com/p/magic-table/source/checkout" class="links">SVN checkout</a></div>
					<p>
						I spent a lot of time and effort building the Magic Table and it's totally free. It's thirsty work, so if you like it then 
						I'd appreciate it if you...
					</p>
					<div style="text-align:center;">
						<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
							<input type="hidden" name="cmd" value="_s-xclick">
							<input type="hidden" name="hosted_button_id" value="JZSZZTB8LXNBG">
							<input type="image" src="http://www.grvisualisation.50webs.com/images/bmab.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
							<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
						</form>
					</div>
				</li>
				<li>
					<h2>iPhone Apps </h2>
					<ul>
						<li class="feature"><a href="http://caligramsoftware.co.uk/peekaboo">Peekaboo 3D</a></li>
						<li class="feature"><a href="http://caligramsoftware.co.uk/">ClapTrax</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->
</div>
<div id="footer">
	<p>Copyright (c) 2008 Dr Greg Ross. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
<script type='text/javascript'>
	
		var targetElement = document.getElementById('tableTargetDiv');
			
			var defaultRowHeight = 25;
			var defaultColumnWidth = 60;
			var tablePositionX = 5;
			var tablePositionY = 5;
			var tableHeight = 403;
			var tableWidth = 315;
			var rowHeaderCount = 0;
			var columnHeaderCount = 0;
			var rows = 16 + columnHeaderCount;
			var columns = 5 + rowHeaderCount;
			var tableModel
				
			function drawTable()
			{
				tableModel = new greg.ross.visualisation.TableModel(rows, columns, defaultRowHeight, defaultColumnWidth, rowHeaderCount, columnHeaderCount);

				setData();
				
				var fisheyeTable = new greg.ross.visualisation.FisheyeTable(tableModel, tablePositionX, tablePositionY,
					tableWidth, tableHeight, "Bar-fill", targetElement);
				fisheyeTable.setBarFill(true);
				fisheyeTable.enableFisheye(false);
			}
			
			function setData()
			{
				var i = rows - 1;
				var j;
				
				do
				{
					j = columns - 1;
					do
					{
						tableModel.setContentAt(i, j, Math.round(Math.random()*10));
					}
					while (j-- > 0) 
				}
				while (i-- > 0)
				
				tableModel.recalculateMinMaxValues();
			}			
						
		</script>
</body>
</html>
